import { defineComponent, computed } from 'vue'
import FooterTr from './footer-tr'
import { COMPS_NAME } from '../util/constant'

import { use样式 } from 'amtf/hooks'
import {
  getValByUnit,
  拼组件名,
  isFunction,
  isBoolean,
  getRandomId,
} from 'amtf/utils'
const 主名 = 'table-footer'
const 组件名 = 拼组件名(主名)

export default defineComponent({
  name: 组件名,
  props: {
    colgroups: {
      type: Array,
      required: true,
    },
    footerData: {
      type: Array,
      required: true,
    },
    hasFixedColumn: {
      type: Boolean,
      default: false,
    },
    allRowKeys: {
      type: Array,
      required: true,
    },
    rowKeyFieldName: {
      type: String,
      default: null,
    },
    cellStyleOption: {
      type: Object,
      default: () => null,
    },
    eventCustomOption: {
      type: Object,
      default: () => null,
    },
    footerRows: {
      type: Array,
      default: () => [],
    },
    fixedFooter: {
      type: Boolean,
      default: true,
    },
    cellSpanOption: {
      type: Object,
      default: () => null,
    },
  },
  setup(props) {
    const { 拼样式名_table直属 } = use样式(主名)

    const footerClass = computed(() => ({
      [拼样式名_table直属('fixed-footer')]: props.fixedFooter,
    }))

    const getTrKey = ({ rowData, rowIndex }) => {
      let result = rowIndex
      const { rowKeyFieldName } = props
      if (rowKeyFieldName) {
        result = rowData[rowKeyFieldName]
      }
      return result
    }
    // console.log(`props.footerRows 👉`, props.footerRows)
    return () => (
      <tfoot class={footerClass.value}>
        {props.footerData.map((rowData, rowIndex) => (
          <FooterTr
            key={getTrKey({ rowData, rowIndex })}
            {...{
              rowIndex,
              rowData,
              colgroups: props.colgroups,
              rowKeyFieldName: props.rowKeyFieldName,
              cellStyleOption: props.cellStyleOption,
              footerRows: props.footerRows,
              fixedFooter: props.fixedFooter,
              cellSpanOption: props.cellSpanOption,
              eventCustomOption: props.eventCustomOption,
            }}
          />
        ))}
      </tfoot>
    )
  },
})
